<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jun
 * @Date: 2021-06-04 14:38:57
 * @LastEditors: Jun
 * @LastEditTime: 2021-06-04 16:49:01
-->
<template>
  <div class="el-form-list">
    <div v-for="item of specialForm" :key="item.id">
      <!-- 输入框 -->
      <template v-if="item.type === 1">
        <el-form-item :label="item.ndsib">
          <my-input v-model="item.value"></my-input>
        </el-form-item>
      </template>

      <!-- 单选框 -->
      <template v-if="item.type === 2">
        <el-form-item :label="item.ndsib">
          <my-radio :valueArray="item.options" v-model="item.value"></my-radio>
        </el-form-item>
      </template>

      <!-- 多选框 -->
      <template v-if="item.type === 3">
        <el-form-item :label="item.ndsib">
          <my-check-box
            :valueArray="item.options"
            v-model="item.value"
          ></my-check-box>
        </el-form-item>
      </template>

      <!-- 下拉列表 -->
      <template v-if="item.type === 4">
        <el-form-item :label="item.ndsib">
          <my-select
            :valueArray="item.options"
            v-model="item.value"
          ></my-select>
        </el-form-item>
      </template>

      <!-- 上传文件 -->
      <template v-if="item.type === 5">
        <el-form-item :label="item.ndsib">
          <upload v-model="item.value"></upload>
        </el-form-item>
      </template>

      <!-- 日期 -->
      <template v-if="item.type === 6">
        <el-form-item :label="item.ndsib">
          <date-picker v-model="item.value"></date-picker>
        </el-form-item>
      </template>

      <!-- 多行文本 -->
      <template v-if="item.type === 7">
        <el-form-item :label="item.ndsib">
          <my-input v-model="item.value" type="textarea"></my-input>
        </el-form-item>
      </template>
    </div>
  </div>
</template>

<script>
import {setFormVal} from "../utils/setFormVal"
import {setFormOptions} from "../utils/setFormOptions"
export default {
  props: {
    form: {
      type: Array,
      required: true,
    },
  },
  data() {
    return {
      specialForm: "", //特殊表单
    };
  },
  methods: {
    setFormVal(formArray) {
      //给公共表单、特殊表单都添加一个value值，用来做值
      formArray.forEach((item) => {
        if (item.type !== 3) {
          //不是多选
          item.value = "";
        } else {
          //多选
          item.value = [];
        }
      });
    },
    setFormOptions(formArray) {
      //给公共表单、特殊表单都添加一个options值，用来做选项
      formArray.forEach((item) => {
        if (item.type === 2 || item.type === 3) {
          //单选、多选
          let arr = item.optn.split(",");
          item.options = [];
          arr.forEach((items, idx) => {
            let arrs = items.split("-");
            item.options[idx] = { label: Number(arrs[0]), content: arrs[1] };
          });
        } else if (item.type === 4) {
          //下拉列表
          let arr = item.optn.split(",");
          item.options = [];
          arr.forEach((items, idx) => {
            let arrs = items.split("-");
            item.options[idx] = { value: arrs[0], label: arrs[1] };
          });
        }
      });
    },
  },
  created() {
    this.specialForm = this.form.filter((item) => {
      //过滤出特殊表单
      return item.ispublic === 0;
    });
    setFormVal(this.specialForm);
    setFormOptions(this.specialForm);
  },
};
</script>

<style>
</style>